<template>
	<view class="bgBox">
		<u-navbar bgColor="#D9EDD4" autoBack title="搜索" safeAreaInsetTop fixed placeholder></u-navbar>
		<view class="page-content">
			<view class="search">
				<u-search searchIconColor='#507847' bgColor="#fff" borderColor="#507847" :show-action="false" action-text="搜索"></u-search>
				<!-- <u-icon name="scan" class="searchScan" color="#507847" size="24"></u-icon> -->
			</view>
			
			<view class="hot-search">
				<view class="hot-title">热门搜索</view>
				<view class="hot-keyWord">
					<view class="hot-item" v-for="(item,index) in keyWord" :key="index">
						{{item.name}}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				keyWord:[
					{name:'翡 翠 手 镯'},
					{name:'翡 翠 观 音'},
					{name:'佛'},
					{name:'黄 翡'},
					{name:'翡 翠 手 串'},
					{name:'和 田 玉 手 串'},
					{name:'佛 公'},
					{name:'墨 翠'},
					{name:'和 田 玉 手 镯'},
					{name:'翡 翠 戒 指'},
				]
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page-content{
		margin: $uni-spacing-row-lg;
		.search{
			display: flex;
			padding-bottom: $uni-spacing-col-base;
			.searchScan {
				position: absolute;
				top: 49px;
				right: 30px;
			}
		}
		
		.hot-search{
			.hot-title{
				color: $uni-text-color;
				padding: $uni-spacing-col-sm;
				font-weight: 540;
			}
			.hot-keyWord{
				display: grid;
				grid-template-columns: 1fr 1fr;
				grid-template-rows: repeat(5,1fr);
				grid-gap: 12px;
				padding: $uni-spacing-col-base;
				.hot-item{
					font-size: $uni-font-size-base;
					color: $uni-text-color-grey;
				}
			}
		}
	}
</style>